<template>
  <div class="bg-container h-full">
    <DialogTip ref="dialogTip" />

    <!-- <div class="bg-img">
      <el-image :src="bgImg[0].picture"
                fit="cover"></el-image>
    </div> -->

    <div class="float-container" id="personCenter">
      <div class="left">
        <el-menu @select="menuClick" :defaultActive="defaultActive">
          <SideMuneItem v-for="item in menuList" :key="item.path" :basePath="'/user' + '/' + item.path" :item="item" />
        </el-menu>
      </div>
      <div class="right">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import SideMuneItem from '@/components/SideMuneItem/index.vue'
import { userRouteList, userMenuList } from '@/router/index.js'
import { mapGetters } from 'vuex'
import DialogTip from './components/DialogTip'
import { personBus } from './personBus.js'

export default {
  components: {
    SideMuneItem,
    DialogTip,
  },
  data () {
    return {
      baseRoute: '/user',
      showMenuList: userMenuList,
      defaultActive: '/user/index',
      bgImg: [
        {
          picture: require('@/assets/page-head/personCenter.png'),
          address: '南昌市',
        },
      ],
      activeParamName: 'baseInfo',
      menuList: userRouteList.children,
      scrollY: 0,
      scrollFun: null,
    }
  },
  computed: {
    ...mapGetters({
      userName: 'name',
      userId: 'userId',
      userBaseInfo: 'userBaseInfo',
    }),
  },
  watch: {
    '$route': {
      handler (v, oldv) {
        // 排除页面
        if (v.path != '/user/baseInfo') {
          this.initDialog(v.path);
        }

        if (v != oldv) {
          this.defaultActive = v.path
        }
      },
      deep: true
    }
  },
  created () {
    this.initScrollFun()
  },
  mounted () {
    window.addEventListener('scroll', this.scrollFun)
    this.initRouteName(this.$route.matched.slice(2))
    // this.initDialog(this.$route)

    // 初次进入时，设定初始菜单
    this.defaultActive = this.$route.path

    personBus.$on('changeDialog', (arg) => {
      if (arg) {
        this.showDialog()
      } else {
        this.hideDialog()
      }
    })
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollFun)
    personBus.$off('changeDialog')
  },
  methods: {
    hideDialog () {
      this.$refs.dialogTip.hideDialog()
    },
    showDialog () {
      this.$refs.dialogTip.showDialog()
    },
    initDialog (route) {
      let baseInfo = this.$store.getters.userBaseInfo
      let name = (baseInfo && baseInfo.companyName) || ''
      let nowPath = route.path
      let toPath = '/user/baseInfo'
      if (name) {
        this.hideDialog()
      } else {
        if (nowPath === toPath) {
          this.hideDialog()
          return
        }
        this.$refs.dialogTip.showDialog()
      }
    },

    initRouteList () {
      this.menuList = userRouteList.children
    },
    /***
     * @param {Arrary} routeNameList    route.matched
     * @param  {Object} vm
     *
     */
    initRouteName (routeNameList, vm) {
      if (!this.$store.getters.userId) {
        // this.$message({
        //   type: 'error',
        //   message: '登录状态已失效',
        // })
        this.$router.push({
          path: '/login',
        })
        return
      }
      let resRouteName = routeNameList[1]

      for (let index = routeNameList.length - 1; index >= 0; index--) {
        const element = routeNameList[index]
        let findRoutePath = this.findRoute(element)
        if (findRoutePath) {
          resRouteName = findRoutePath
          break
        }
      }
      if (resRouteName) {
        if (vm) {
          vm.defaultActive = resRouteName
        } else {
          this.defaultActive = resRouteName
        }
      }
    },

    // 寻找  showMenuList 中存在的路由
    /***
     * @param {Arrary} routeNameList
     * @return  {String} resRoute
     */
    findRoute (routeObj) {
      let resRouteName = routeObj.path
      let resRoutePath = this.showMenuList.find((item) => {
        return item.path === resRouteName
      })
      return resRoutePath && resRoutePath.path
    },

    // 整理 路由数组 将 路由数组中所有元素{ hidden: 0 }  的
    //  path 字段拼接完整
    /**
     * @param {Arrary} menuList
     * @return {Arrary} newList
     */
    manageShowRouteList (list, basePath) {
      let menuList = [...list]
      for (let index = 0; index < menuList.length; index++) {
        const element = { ...menuList[index] }

        if (!element.hidden || element.hidden === 0) {
          element.path = basePath + '/' + element.path
          this.showMenuList.push(element)

          if (element.children && element.children.length > 0) {
            this.manageShowRouteList(element.children, element.path)
          }
        }
      }
    },
    // 侧边栏菜单点击 跳转路由
    menuClick (index) {
      let nowPath = this.$route.path
      if (index === nowPath) {
        this.defaultActive = index
        return
      }
      this.$router.push({ path: index })
    },

    handleScroll () {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.scrollY = scrollTop
    },
    initScrollFun () {
      let that = this
      let throttle = function (func, delay) {
        var timer = null

        return function () {
          var context = this
          var args = arguments
          if (!timer) {
            timer = setTimeout(function () {
              func.apply(context, args)
              timer = null
            }, delay)
          }
        }
      }
      let handleScroll = function () {
        var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
        that.scrollY = scrollTop
      }

      this.scrollFun = throttle(handleScroll, 300)
    },
    fixedSrcoll () {
      let personCenterDom = document.getElementById('personCenter')
      var optionSupported = 'scrollBehavior' in document.documentElement.style
      if (optionSupported) {
        personCenterDom.scrollIntoView({
          behavior: 'smooth',
          block: 'end',
        })
      } else {
        personCenterDom.scrollIntoView(false)
      }
      console.log(personCenterDom)
    },
  },
}
</script>

<style lang="scss" scoped>
.baseInfo-tip {
  @apply mt-44;

  .content {
    @apply text-center rounded-lg px-20 py-2;

    .title {
      @apply text-blue-400 text-2xl;
    }
  }
}

.bg-img {
  width: 100%;
  height: 520px;

  .el-image {
    width: 100%;
    height: 100%;
  }
}

.float-container {
  @apply h-full bg-white flex flex-nowrap;

  .left {
    min-width: 18.75rem;
    width: 18.75rem;
    height: calc(100% - 6rem - 300px);

    @apply fixed pt-4 bg-white shadow-none;

    top: calc(6rem - 2px);
    z-index: 0;

    ::v-deep .el-menu {
      border-right: none;
    }
  }

  .right {
    margin-left: 18.75rem;
    height: calc(100vh - 6rem);
    overflow-y: auto;

    @apply flex-1 bg-white shadow-none px-10 py-9 border-l;
  }
}
</style>
